<template>
  <div id="editMetadata">
    <el-container>
      <el-header>
        <div style="">
          <div style="display: inline-block">
            <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                       @click="goBack">返回
            </el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">编辑元数据</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="180px">
          <div id="menu">
            <MenuItem :item="item" :key="item.name" v-for="item in items" @change-selection="refreshList"></MenuItem>
          </div>
        </el-aside>
        <el-main style="padding: 0px">
          <div style="font-family: PingFangSC-Regular">
            <el-form :inline="true" :model="MetadataForm" :style="{ display: Metadata, height: formStyle}"
                     class="demo-form-inline">
              <h1 id="Metadata"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>附注</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.annotation"></el-input>
                </div>
                <div class="inline-block">
                  <div>封面</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.cover"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>图书级别<span style="color:red;">*</span></div>
                  <el-select v-model="MetadataForm.Category" clearable filterable placeholder="请选择" size="small"
                             style="width: 320px"
                             v-bind:disabled='categoryDisabled' @change="$forceUpdate()">
                    <el-option value="0" label="名词委员会"></el-option>
                    <el-option value="1" label="卫健委发布标准"></el-option>
                    <el-option value="2" label="教材"></el-option>
                    <el-option value="3" label="专著"></el-option>
                  </el-select>
                </div>
                <div class="inline-block">
                  <div>版本</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Edition"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>权限</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Right"></el-input>
                </div>
                <div class="inline-block">
                  <div>时空范围</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Coverage"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>语种</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Language"></el-input>
                </div>
                <div class="inline-block">
                  <div>来源</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Source"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>唯一标识符</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Identifier"></el-input>
                </div>
                <div class="inline-block">
                  <div>数字资源类型</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Type"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>国际标准书号</div>
                  <el-input disabled size="small" class="input-with-select" v-model="MetadataForm.ISBN"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="TitlesForm" :style="{ display: Titles, height: formStyle }"
                     class="demo-form-inline"
            >
              <h1 id="Titles"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>正题名</div>
                  <el-input v-model="TitlesForm.Main_Title" class="input-with-select" disabled size="small"></el-input>
                </div>
                <div class="inline-block">
                  <div>交替题名</div>
                  <el-input size="small" class="input-with-select" v-model="TitlesForm.Alternative_Title"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div>
                  <div class="inline-block">
                    <div>并列题名</div>
                    <el-input size="small" class="input-with-select" v-model="TitlesForm.Parallel_Title"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>其他题名</div>
                    <el-input size="small" class="input-with-select" v-model="TitlesForm.Other_Title"></el-input>
                  </div>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="SubjectForm" :style="{ display:Subject, height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Subject"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>中图号</div>
                  <el-input size="small" class="input-with-select" v-model="SubjectForm.CLC_ClassCode"></el-input>
                </div>
                <div class="inline-block">
                  <div>关键词</div>
                  <el-input size="small" class="input-with-select" v-model="SubjectForm.KeyWords"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="DescriptionForm" :style="{ display: Description,height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Description"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>资源类型</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.contentType"></el-input>
                </div>
                <div class="inline-block">
                  <div>内容简介</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.Introduction"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>其他</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.Other"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="PublisherForm" :style="{ display: Publisher,height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Publisher"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>出版者</div>
                  <el-input size="small" class="input-with-select" v-model="PublisherForm.Publisher"></el-input>
                </div>
                <div class="inline-block">
                  <div>出版地</div>
                  <el-input size="small" class="input-with-select" v-model="PublisherForm.Publish_Area"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="DateForm" :style="{ display: Date1,height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Date"></h1>
              <div>
                <div class="block" style="display: inline-block;margin-left: 10px">
                  <div class="demonstration">出版日期</div>
                  <el-date-picker
                    v-model="DateForm.Publish_Date"
                    value-format="yyyy.MM"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="display: inline-block;margin-left: 10px">
                  <div class="demonstration">创建日期</div>
                  <el-date-picker
                    v-model="DateForm.Create_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">提交日期</div>
                  <el-date-picker
                    v-model="DateForm.Submit_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">审核日期 date</div>
                  <el-date-picker
                    v-model="DateForm.Check_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">修改日期</div>
                  <el-date-picker
                    v-model="DateForm.Modify_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">失效日期</div>
                  <el-date-picker
                    v-model="DateForm.Failure_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="FormatForm" :style="{ display: Format,height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Format"></h1>
              <div>
                <div class="inline-block">
                  <div>数字资源格式类</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Format_type"></el-input>
                </div>
                <div class="inline-block">
                  <div>资源载体</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Resource_carrier"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>资源大小</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.File_Size"></el-input>
                </div>
                <div class="inline-block">
                  <div>字数</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Words"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>页数</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Pages"></el-input>
                </div>
                <div class="inline-block">
                  <div>开本</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Extent"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>图书在版编目数据</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.CIP"></el-input>
                </div>
                <div class="inline-block">
                  <div>分辨率</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Resolution"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div>技术环境</div>
                <el-input size="small" class="input-with-select"
                          v-model="FormatForm.Technical_environment"></el-input>
              </div>
            </el-form>
            <el-form :inline="true" :model="RelationForm" :style="{ display: Relation,height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Relation"></h1>
              <div>
                <div class="inline-block">
                  <div>丛书名</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Series"></el-input>
                </div>
                <div class="inline-block">
                  <div>前版本</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Formal_Edition"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>后版本</div>
                  <el-input size="small" class="input-with-select"
                            v-model="RelationForm.Other_Related_Resouces"></el-input>
                </div>
                <div class="inline-block">
                  <div>配套光盘</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Attached_Disc"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="PriceForm" :style="{ display: Price,height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Price"></h1>
              <div>
                <div class="inline-block">
                  <div>纸质图书价格</div>
                  <el-input size="small" class="input-with-select" v-model="PriceForm.B_price"></el-input>
                </div>
                <div class="inline-block">
                  <div>数字资源价格</div>
                  <el-input size="small" class="input-with-select" v-model="PriceForm.E_price"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="EditorForm" :style="{ display: Editors,height: formStyle}"
                     class="demo-form-inline"
            >
              <h1 id="Editor"></h1>
              <div>
                <div class="inline-block">
                  <div>策划编辑</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Scheme_Editor"></el-input>
                </div>
                <div class="inline-block">
                  <div>责任编辑</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Commissioning_Editor"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>封面设计</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Cover_Designer"></el-input>
                </div>
                <div class="inline-block">
                  <div>版本设计</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Layout_Disigner"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>责任校队</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Press_Corrector"></el-input>
                </div>
                <div class="inline-block">
                  <div>其他</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Others"></el-input>
                </div>
              </div>
            </el-form>
            <div>
              <el-form :inline="true" :style="{ display: Creators,height: formStyle}" class="demo-form-inline"
              >
                <el-button size="small" type="success" @click="CreatorsFormVisible  = true">新增</el-button>
                <el-table highlight-current-row :data="CreatorsTableData" :style="{ display: Creators}" border stripe>
                  <el-table-column label="名字" min-width="170" prop="Name">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Name">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="角色" min-width="170" prop="Role">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Role">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="描述" min-width="200" prop="Institution">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Institution">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="150">
                    <template slot-scope="scope">
                      <span><el-link type="danger"
                                     @click="deleteCreators(scope.$index,scope.row.id)">删除</el-link></span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
            <div>
              <el-form :inline="true" :style="{ display: Contributors,height: formStyle}" class="demo-form-inline"
              >
                <el-button size="small" type="success" @click="ContributorFormVisible  = true">新增</el-button>
                <el-table highlight-current-row :data="ContributorTableData" :style="{ display: Contributors}" border stripe>
                  <el-table-column label="名字" min-width="170" prop="Name">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Name">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="角色" min-width="170" prop="Role">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Role">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="描述" min-width="200" prop="Institution">
                    <template slot-scope="scope">
                      <el-input style="width: 300px" v-model="scope.row.Institution">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="150">
                    <template slot-scope="scope">
                      <span><el-link type="danger"
                                     @click="deleteContributor(scope.$index,scope.row.id)">删除</el-link></span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
          </div>
          <el-dialog title="新增" :visible.sync="CreatorsFormVisible" v-on:close="rest" width="350px">
            <el-form :model="form" style="width: 300px">
              <div>名字</div>
              <el-input size="small" style="width: 300px" v-model="form.name" autocomplete="off"></el-input>
              <div style="margin-top: 10px">角色</div>
              <el-input size="small" style="width: 300px" v-model="form.role" autocomplete="off"></el-input>
              <div style="margin-top: 10px">描述</div>
              <el-input size="small" style="width: 300px" v-model="form.institution" autocomplete="off"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="CreatorsFormVisible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="confirmDialog">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="新增" :visible.sync="ContributorFormVisible" v-on:close="rest" width="350px">
            <el-form :model="form">
              <div>名字</div>
              <el-input size="small" style="width: 300px" v-model="form.name" autocomplete="off"></el-input>
              <div style="margin-top: 10px">角色</div>
              <el-input size="small" style="width: 300px" v-model="form.role" autocomplete="off"></el-input>
              <div style="margin-top: 10px">描述</div>
              <el-input size="small" style="width: 300px" v-model="form.institution" autocomplete="off"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="ContributorFormVisible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="ContributorConfirm">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
      <el-footer height="30px">
        <div style=" text-align: right" :height="confirmStyle">
          <el-button size="small" type="success" @click="updateMetadataById()">确定</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>

</template>

<script>
import MenuItem from "../common/MenuItem";
import Label from "../calculator/exportModel/Label";

export default {
  name: "Metadata",
  components: {
    Label,
    MenuItem,
  },
  data() {
    return {
      form: {
        name: '',
        role: '',
        institution: '',
      },
      items: [{
        name: '元数据',
        selected: true,
      }, {
        name: '标题',
        selected: false,
      }, {
        name: '主题',
        selected: false,
      }, {
        name: '创作者',
        selected: false,
      }, {
        name: '描述',
        selected: false,
      }, {
        name: '出版者',
        selected: false,
      }, {
        name: '协作者',
        selected: false,
      }, {
        name: '日期',
        selected: false,
      }, {
        name: '数字资源格式',
        selected: false,
      }, {
        name: '相关资源',
        selected: false,
      }, {
        name: '价格',
        selected: false,
      }, {
        name: '编辑',
        selected: false,
      }],
      MetadataForm: {},
      TitlesForm: {},
      SubjectForm: {},
      DescriptionForm: {},
      PublisherForm: {},
      FormatForm: {},
      RelationForm: {},
      PriceForm: {},
      EditorForm: {},
      DateForm: {},
      postData: {},
      CreatorsTableData: [],
      ContributorTableData: [],
      Titles: 'none',
      Metadata: '',
      Subject: 'none',
      Description: 'none',
      Publisher: 'none',
      Date1: 'none',
      Format: 'none',
      Relation: 'none',
      Price: 'none',
      Editors: 'none',
      Creators: 'none',
      Contributors: 'none',
      CreatorsFormVisible: false,
      ContributorFormVisible: false,
      formStyle: '',
      confirmStyle: '',
      categoryDisabled: false
    }
  },
  methods: {
    confirmDialog: function () {
      console.log(this.form)
      if (this.CreatorsFormVisible = true) {
        this.CreatorsTableData.push({
          Name: this.form.name,
          Role: this.form.role,
          Institution: this.form.institution,
        })
        this.CreatorsFormVisible = false
      }
    },
    ContributorConfirm: function () {
      if (this.ContributorFormVisible = true) {
        this.ContributorTableData.push({
          Name: this.form.name,
          Role: this.form.role,
          Institution: this.form.institution,
        })

        this.ContributorFormVisible = false
      }
    },
    rest: function () {
      this.form.name = ''
      this.form.role = ''
      this.form.institution = ''
    },
    updateMetadataById: function () {
      if (!UTIL.isNotEmpty(this.MetadataForm.Category)) {
        this.$message.warning('请选择图书级别');
        return;
      }

      for (let i = 0; i < this.CreatorsTableData.length; i++) {
        if (!UTIL.isNotEmpty(this.CreatorsTableData[i].Name)) {
          this.$message.warning("请填写创作者名称")
          return;
        }
      }

      for (let i = 0; i < this.ContributorTableData.length; i++) {
        if (!UTIL.isNotEmpty(this.ContributorTableData[i].Name)) {
          this.$message.warning("请填写协作者名称")
          return;
        }
      }

      this.postData = this.MetadataForm
      let param = new URLSearchParams();
      param.append("data", JSON.stringify(this.postData))
      param.append("id", this.$route.query.id)
      this.axios.post('/pmph/action/term/updateMetadataById', param)
        .then(() => {
            this.$router.push("/term");
        })
    },
    contributorAdd: function () {
      this.ContributorTableData.push({
        name: '',
        role: '',
        institution: '',
      })
    },
    creatorsEdit: function (index) {
      this.CreatorsTableData[index].CreatorsNameEnable = false
      this.CreatorsTableData[index].CreatorsRoleEnable = false
      this.CreatorsTableData[index].CreatorsEnable = false
    },
    contributorEdit: function (index) {
      this.ContributorTableData[index].ContributorNameEnable = false
      this.ContributorTableData[index].ContributorRoleEnable = false
      this.ContributorTableData[index].ContributorEnable = false
    },
    add: function () {
      this.CreatorsTableData.push({
        name: '',
        role: '',
        institution: '',
      })
    },
    goBack: function () {
      this.$router.push("/term");
    },
    deleteContributor: function (idx, id) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (id == null || id === "") {
          this.ContributorTableData.splice(idx, 1)
        }
      })
    },
    deleteCreators: function (idx, id) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (id == null || id === "") {
          this.CreatorsTableData.splice(idx, 1)
        }
      })
    },
    refreshList(item) {
      window.location.href = '#' + item.name;
      this.setAllItemsUnselected();
      this.setSelectedItem(item);
      if (item.name != '元数据') {
        this.Metadata = 'none';
      } else {
        this.Metadata = '';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '主题') {
        this.Metadata = 'none';
        this.Subject = '';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '标题') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = '';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'

      }
      if (item.name === '描述') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = '';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '出版者') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = '';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '日期') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = '';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '数字资源格式') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = '';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '相关资源') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = '';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '价格') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = '';
        this.Editors = 'none';
        this.Creators = 'none'
      }
      if (item.name === '编辑') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = '';
        this.Creators = 'none'
      }
      if (item.name === '创作者') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = 'none';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = ''
      }
      if (item.name === '协作者') {
        this.Metadata = 'none';
        this.Subject = 'none';
        this.Titles = 'none';
        this.Description = 'none';
        this.Publisher = 'none';
        this.Contributors = '';
        this.Date1 = 'none';
        this.Format = 'none';
        this.Relation = 'none';
        this.Price = 'none';
        this.Editors = 'none';
        this.Creators = 'none'
      }
    },
    setAllItemsUnselected() {
      this.items.forEach(item => {
        item.selected = false;
      });
    },
    setSelectedItem(selectedItem) {
      this.items.forEach(item => {
        if (item.name === selectedItem.name) {
          item.selected = true;
        }
      });
    },
    handleToTopClick() {
      window.location.href = '#top';
      this.setAllItemsUnselected();
      this.setSelectedItem(this.items[0]);
    },
  },
  created() {
    this.formStyle = CONST.WORKSPACE_HEIGHT - 130 + 'px';
    this.confirmStyle = CONST.WORKSPACE_HEIGHT - 130;
    this.MetadataForm = JSON.parse(this.$route.query.metadata);
    this.TitlesForm = this.MetadataForm.Titles;
    this.SubjectForm = this.MetadataForm.Subject;
    this.DescriptionForm = this.MetadataForm.Description;
    this.PublisherForm = this.MetadataForm.Publisher;
    this.FormatForm = this.MetadataForm.Format;
    this.DateForm = this.MetadataForm.Date;
    this.RelationForm = this.MetadataForm.Relation;
    this.PriceForm = this.MetadataForm.Price;
    this.EditorForm = this.MetadataForm.Editors;
    this.CreatorsTableData = this.MetadataForm.Creators.Creator;
    this.ContributorTableData = this.MetadataForm.Contributors.Contributor;
    this.MetadataForm.Category = this.$route.query.category;
    this.categoryDisabled = UTIL.isNotEmpty(this.MetadataForm.Category)
  },
  beforeRouteLeave(to, from, next) {
    // 列表页面跳转到 详情页时，设置需要缓存
    if (to.name == 'Term') {
      from.meta.isUseCache = false
    }
    next()
  },
}
</script>

<style scoped>
#menu {
  margin-top: 15px;
}

.input-with-select {
  width: 320px;
  margin-top: 10px;
}

.inline-block {
  display: inline-block;
  margin-left: 10px;
}
</style>
